<template>
  <div>
    <el-form ref="form" :model="list" :rules="rules">
      <el-form-item v-if="showProv" class="inlineCt">
        <el-select
          v-model="list.provinceId"
          v-loading="provinceLoading"
          placeholder="省："
          style="width: 180px;"
          @change="provinceChange"
        >
          <el-option
            v-for="item in provinceOptions"
            :key="item.id"
            :label="item.areaName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="showCity" label class="inlineCt inlineLabel10">
        <el-select
          v-model="list.cityId"
          v-loading="cityLoading"
          placeholder="市："
          style="width: 180px;"
          @change="cityChange"
        >
          <el-option
            v-for="item in cityOptions"
            :key="item.id"
            :label="item.areaName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="showArea" label class="inlineCt inlineLabel10">
        <el-select
          v-model="list.areaId"
          v-loading="areaLoading"
          placeholder="区："
          style="width: 180px;"
          @change="areaChange"
        >
          <el-option
            v-for="item in areaOptions"
            :key="item.id"
            :label="item.areaName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import * as api from '@/api/components'

  let defaultList = {
    provinceId: null,
    cityId: null,
    areaId: null
  }

  export default {
    props: {
      value: {
        type: Array,
        default () {
          return []
        }
      },
      showProv: {
        type: Boolean,
        default: true
      },
      showCity: {
        type: Boolean,
        default: true
      },
      showArea: {
        type: Boolean,
        default: true
      }
    },
    data () {
      return {
        list: Object.assign({}, defaultList),
        rules: this.rules,
        provinceLoading: false,
        cityLoading: false,
        areaLoading: false,
        provinceOptions: [],
        cityOptions: [],
        areaOptions: []
      }
    },
    watch: {
      value (newVal, oldVal) {
        console.log('watch value', newVal)
        this.filterOptions(newVal)
      }
    },
    created () {
      this.getProvince()
      this.filterOptions(this.value)
    },
    methods: {
      emitLabel () {
        let arr = ['', '']
        for (let i = 0; i < this.cityOptions.length; i++) {
          let item = this.cityOptions[i]
          if (item.id == this.list.cityId) {
            arr[0] = item.areaName
            break
          }
        }

        for (let i = 0; i < this.areaOptions.length; i++) {
          let item = this.areaOptions[i]
          if (item.id == this.list.areaId) {
            arr[1] = item.areaName
            break
          }
        }

        this.$emit('changeLabel', arr)
      },
      /* 同步val值变化 */
      emitInput () {
        let arr = [this.list.provinceId, this.list.cityId, this.list.areaId]
        this.$emit('input', arr)
      },
      /* 回显值 */
      filterOptions (newVal) {
        if (newVal.length === 0) {
          this.resetId()
          return
        }
        this.list.provinceId = newVal[0]
        if (
          newVal[1] &&
          (this.cityOptions.length === 0 || this.list.cityId !== newVal[1])
        ) {
          this.getCity(newVal[0])
        }
        this.list.cityId = newVal[1] ? newVal[1] : null

        if (
          newVal[2] &&
          (this.areaOptions.length === 0 || this.list.areaId !== newVal[2])
        ) {
          this.getArea(newVal[1])
        }
        this.list.areaId = newVal[2] ? newVal[2] : null
      },
      /* 选择省 */
      provinceChange (id) {
        console.log('provinceChange', id)
        this.cityOptions = []
        this.list.cityId = null
        this.areaOptions = []
        this.list.areaId = null
        this.getCity(id)
        this.emitInput()
      },
      /* 选择市 */
      cityChange (id) {
        console.log('cityChange', id)
        this.areaOptions = []
        this.list.areaId = null
        this.getArea(id)
        this.emitInput()
        // this.emitLabel()
      },
      /* 选择区 */
      areaChange (id) {
        console.log('areaChange', id)
        this.emitInput()
        this.emitLabel()
      },
      /* 获取省 */
      getProvince () {
        if (!this.showProv) {
          return
        }
        this.provinceLoading = true
        api
          .getProvince()
          .then(response => {
            this.provinceOptions = response.data
            this.provinceLoading = false
          })
          .catch(err => {
            this.provinceLoading = false
          })
      },
      /* 获取市 */
      getCity (id) {
        if (!this.showCity) {
          return
        }
        this.cityLoading = true
        api
          .getCity(id)
          .then(response => {
            this.cityOptions = response.data
            this.cityLoading = false
          })
          .catch(err => {
            this.cityLoading = false
          })
      },
      /* 获取区 */
      getArea (id) {
        if (!this.showArea) {
          return
        }
        this.areaLoading = true
        api
          .getArea(id)
          .then(response => {
            this.areaOptions = response.data
            this.areaLoading = false
          })
          .catch(err => {
            this.areaLoading = false
          })
      },
      /* 清空选择状态 */
      resetId () {
        this.list.provinceId = null
        this.list.cityId = null
        this.list.areaId = null
      }
    }
  }
</script>
